<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h2>表格</h2>
    <p>联合使用所有表格类:</p>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Anna</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Debbie</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
        </tr>
        </tbody>
    </table>

    <table class="table">
        <caption>上下文表格布局</caption>
        <thead>
        <tr>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <td>产品1</td>
            <td>23/11/2013</td>
            <td>待发货</td>
        </tr>
        <tr class="success">
            <td>产品2</td>
            <td>10/11/2013</td>
            <td>发货中</td>
        </tr>
        <tr class="warning">
            <td>产品3</td>
            <td>20/10/2013</td>
            <td>待确认</td>
        </tr>
        <tr class="danger">
            <td>产品4</td>
            <td>20/10/2013</td>
            <td>已退货</td>
        </tr>
        </tbody>
    </table>
</div>

<div class="table-responsive">
    <table class="table">
        <caption>响应式表格布局</caption>
        <thead>
        <tr>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>产品1</td>
            <td>23/11/2013</td>
            <td>待发货</td>
        </tr>
        <tr>
            <td>产品2</td>
            <td>10/11/2013</td>
            <td>发货中</td>
        </tr>
        <tr>
            <td>产品3</td>
            <td>20/10/2013</td>
            <td>待确认</td>
        </tr>
        <tr>
            <td>产品4</td>
            <td>20/10/2013</td>
            <td>已退货</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
